<template>
    <div class="min-h-screen bg-gray-50">

        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="grid grid-cols-3 gap-8">
                <div class="col-span-2">
                    <div class="bg-white p-6 rounded-lg shadow-md mb-8">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-xl font-bold">テスト完了</h2>
                            <div class="flex items-center gap-4">
                                <div class="text-2xl font-bold text-primary">合計スコア：{{ score }}分</div>
                            </div>
                        </div>
                        <div class="grid grid-cols-4 gap-6 mb-8">
                            <div class="p-4 border border-gray-200 rounded-lg text-center">
                                <p class="text-gray-500 mb-2">総問題数</p>
                                <p class="text-2xl font-semibold">10</p>
                            </div>
                            <div class="p-4 border border-gray-200 rounded-lg text-center">
                                <p class="text-gray-500 mb-2">正解数</p>
                                <p class="text-2xl font-semibold text-green-500">{{ 10 - list.length }}</p>
                            </div>
                            <div class="p-4 border border-gray-200 rounded-lg text-center">
                                <p class="text-gray-500 mb-2">誤答数</p>
                                <p class="text-2xl font-semibold text-red-500">{{ list.length }}</p>
                            </div>
                            <div class="p-4 border border-gray-200 rounded-lg text-center">
                                <p class="text-gray-500 mb-2">所要時間</p>
                                <p class="text-2xl font-semibold">{{ roundMinutes(time) }}{{
                                    isMinuteOrHour(roundMinutes(time)) }}</p>
                            </div>
                        </div>
                        <div class="space-y-6">
                            <div class="p-4 border border-gray-200 rounded-lg" v-for="(item, index) in list"
                                :key="index">
                                <div class="flex justify-between items-start mb-4">
                                    <span class="text-red-500">誤答</span>
                                    <el-button type="primary"
                                        @click="reset_question(item.id, item.exercise_id, item.category_id, item.branch_id)">もう一度答える</el-button>
                                </div>
                                <p class="text-gray-700 mb-4">{{ item.exercise_text }}</p>
                                <div class="space-y-2">
                                    <p class="text-sm text-gray-500">あなたの答え：{{ item.user_answer }}</p>
                                    <p class="text-sm text-green-600">正解：{{ item.answer_result }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="space-y-6">

<div class="bg-white p-6 rounded-lg shadow-md h-fit">
  <h3 class="text-lg font-medium mb-4">学習データ</h3>
  <div class="space-y-6">
    <div class="p-4 bg-gray-50 rounded-lg">
      <h4 class="font-medium text-sm mb-3">今週の勉強の概要</h4>
      <div class="space-y-2">
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">完成したの問題数</span>
          <span class="font-medium">{{ count_total?.completed_tasks }}</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の正解率</span>
          <span class="font-medium">{{ count_total?.correctness_rate }}%</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の達成率</span>
          <span class="font-medium">{{ count_total?.completion_rate }}%</span>
        </div>
        <!-- <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の勉強時間です</span>
          <span class="font-medium">{{ roundMinutes(count_total?.total_study_time) }}{{
            isMinuteOrHour(roundMinutes(count_total?.total_study_time)) }}</span>
        </div> -->
      </div>
    </div>


  </div>
</div>
</div>
            </div>
        </div>
    </div>
</template>

<script>
import { get, post } from "@/http/axios.js"

export default {
    data() {
        return {
            success_len: 0,
            error_len: 0,
            score: 0,
            time: 0,
            branch_id: null,
            count_total: {},
            list: [],
        }


    },
    async mounted() {
        this.branch_id = this.$route.query.branch_id
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
       await this.getResouce()
       await this.getCard()
       await this.getCunts()
       this.user_category()
       loading.close()
    },
    methods: {
        async getCunts() {
            let data = await get("/get_week_success_task")
            this.count_total = data.data.data
        },
        reset_question(answer_id, exercise_id, category_id, branch_id) {

            this.$router.push({ path: "/exercise", query: { answer_id: answer_id, exercise_id: exercise_id, id: category_id, branch_id: branch_id } })
        },
        async user_category(){
         await post("/user_category", { source: this.score, category_id:sessionStorage.getItem("category_id")})
        },
        roundMinutes(minutes) {
      return Math.round(minutes);
    },
    isMinuteOrHour(value) {
      // 处理负数和非整数情况
      if (value < 0 || !Number.isInteger(value)) {
        return '無効な入力は、非負の整数を入力してください';
      }

      // 处理分钟
      if (value >= 0 && value < 60) {
        return '分';
      }

      // 处理小时，包括超过23小时但小于48小时的情况
      if (value >= 0 && value <= 23) {
        return '時間';
      } else if (value > 23 && value <= 47) {
        // 将超过24小时但小于48小时的值转换为0-23的范围
        value = value - 24;
        return '時間';
      } else if (value > 47 && value <= 71) {
        value = value - 48;
        return '時間';
      } else {
        return '時間や分の値は有効ではありません';
      }
    },
        format(text) {
            return text.replace(/\\(.)/g, "$1");
        },
        async getCard() {
            let data = await get("/getTimeScore", { branch_id: this.branch_id })
            this.score = data.data.data.score
            this.time = data.data.data.duration
        },
        async getResouce() {
            let data = await get("/error_replay", { branch_id: this.branch_id })
            this.list = data.data.data
        }
    }
}
</script>

<style>
.el-button {
    font-weight: normal;
}

.el-progress-bar__outer {
    height: 8px !important;
    border-radius: 9999px !important;
}

.el-progress-bar__inner {
    border-radius: 9999px !important;
}

.text-custom {
    color: #409EFF;
}

.text-primary {
    color: #409EFF;
}

.border-primary:hover {
    border-color: #409EFF;
}
</style>